<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            margin: 4px;
        }

        #pagination {
            display: flex;
            justify-content: center;
            width: 800px;
        }

        #pagination li {
            list-style: none;
            background: #666;
            color: #fff;
            margin: 0 3px;
            padding: 2px 8px;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>用户管理系统</h2>
        姓名：<input type="text" v-model="queryInfo.name" placeholder="请输入姓名">&nbsp;&nbsp;
        电话：<input type="text" v-model="queryInfo.phone" placeholder="请输入电话">&nbsp;&nbsp;
        状态：<select v-model="queryInfo.status">
            <option value="">全部</option>
            <option value="0">启用</option>
            <option value="1">禁用</option>
        </select>&nbsp;&nbsp;
        <button @click="loadUsers()">查询</button>
        <button onclick="goAdd()">添加用户</button>
        <br> <br>

        <table border="1" width="800px" cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>地址</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody align="center" id="tb">
                <tr v-for="(user,index) in users" :key="user.id">
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.phone}}</td>
                    <td>{{user.address}}</td>
                    <td>{{user.status}}</td>
                    <td>
                        <button>修改</button>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <ul id="pagination">

        </ul>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                queryInfo: {
                    page: 1,
                    rows: 10,
                    name: '',
                    phone: '',
                    status: ''
                },
                
                users: []
            },
            created() {
                this.loadUsers()
            },
            methods: {
                loadUsers() {
                    $.ajax({
                        type: 'get',
                        url: 'http://ums.tangxiaoyang.vip/api/user/findByPage',
                        data: this.queryInfo,
                        dataType: 'json',
                        success: (res) => {
                            if (res.status === 200) {
                                this.users = res.data.records
                            }
                        }
                    })
                }
            }
        })

        // 跳转到添加页面
        function goAdd() {
            location.href = 'add.html'
        }
    </script>
</body>

</html>